<template>
	<div class="index">
		<Mtable :columnData="columnData" :tableData="tableData" tableHeight="17.7em"></Mtable>
		<el-dialog v-model="dialogVisible" title="查看图片" width="40%" :modal="false" draggable>
			<div class="content">
				<p>告警图片</p>
				<div class="rowSC img-box" id="imgBox1">
					<img v-for="(item, index) in detail.alarmPicture" @click="previewImage(item.img)" :src="`/jeecg-boot/fileManage/imageV?fileUrl=` + item.img" :key="index" />
				</div>
				<p>已处理图片</p>
				<div class="rowSC img-box" id="imgBox2">
					<img v-for="(item, index) in detail.processedPicture" @click="previewImage(item.img)" :src="`/jeecg-boot/fileManage/imageV?fileUrl=` + item.img" :key="index" />
				</div>
			</div>
			<template #footer>
				<span class="dialog-footer">
					<el-button size="large" @click="dialogVisible = false">取消</el-button>
					<el-button size="large" type="primary" @click="dialogVisible = false">
						确认
					</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup>
	import {
		reactive,
		ref,
		watch,
		computed
	} from "vue"
	import Viewer from 'viewerjs';
	import {
		getAlarmCenterList
	} from '@/api/RoadGate'
	import {
		useStore
	} from "vuex";

	const store = useStore()
	const dialogVisible = ref(false)
	const detail = ref<any>({})
	const columnData = reactive < any > ([{
			label: '告警事件',
			key: 'alarmEvent',
			iconColor: (scope: any) => {
				return scope.row['status'] == 1 ? '#58b6e5' : '#f90000'
			}
		},
		{
			label: '告警区域',
			key: 'alarmArea',
		},
		{
			label: '告警时间',
			key: 'alarmTime',
		},
		{
			label: '责任人',
			key: 'createBy',
		},
		{
			label: '处理状态',
			key: 'status',
			color: (scope: any) => {
				return scope.row[scope.column.property] == 1 ? '#fff' : '#f90000'
			},
			value: (scope: any) => {
				return scope.row[scope.column.property] == 1 ? '已处理' : '未处理'
			}
		},
		{
			label: '操作',
			arr: [{
				name: '查看图片',
				color: (scope: any) => {
					return '#e8a93b'
				},
				method: (scope: any) => {
					// console.log('scope====',scope.row)
					detail.value = scope.row
					dialogVisible.value = !dialogVisible.value
				}
			}]
		},
	])
	
	const tableData = ref < any > ([])

	const init = async () => {
		const res = await getAlarmCenterList({
			site: window.site
		})
		tableData.value = res.data.result && res.data.result.map((c: any) => ({
			...c,
			alarmPicture: c.urls && JSON.parse(c.urls),
			processedPicture: c.processedPicture && JSON.parse(c.processedPicture)
		}))
	}
	
	const previewImage = (url: string) => {
		window.open(`/jeecg-boot/fileManage/imageV?fileUrl=` + url)
	}

	const refresh = computed(() => store.state.refresh) // 当前故障状态
	watch(refresh, () => {
		init()
	}, {
		immediate: true
	})
</script>

<style scoped lang="scss">
	.index {
		:deep(.el-dialog) {
			// --el-dialog-bg-color: none !important;
			// border: 2px solid #008bff;
			// background-image: url('@/assets/index/borderBg.png');
			// background-size: 100% 100%;
			// backdrop-filter: blur(50px);//毛玻璃属性
			margin-top: 15vh !important;
			.el-dialog__header {
				height: inherit !important;
			}
			.el-dialog__title {
				font-size: 1.1em !important;
				margin: 0 !important;
				// color: #fff !important;
			}
			.el-dialog__headerbtn {
				width: 3.75em !important;
				height: 3.125em !important;
				font-size: 1.875em !important;
			}
		}
		.content {
			height: 55vh;
			overflow: auto;
			img {
				width: 10em;
				height: 10em;
				margin: 0.2em;
			}
			p {
				border-left: 5px solid #215fdd;
				padding: 0.2em 0.625em;
				font-size: 1.5em;
			}
			.img-box {
				flex-flow: wrap row;
				position: relative;
			}
		}
	}
</style>
